<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习10</title>
	</head>
	
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background-color: black;
		}
		.big{
			width: 100%;
			height: 700px;
			float: left;
			background-color: black;
			border-top: 10px solid red;
			border-bottom: 50px solid red;
		}
		.character{
			background-image: url(img/player_right.gif);
			position: absolute;
			float: left;
			width: 100px;
			height: 100px;
			left: 700px;
			top: 200px;
			line-height: 100px;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			z-index: 10;
			opacity: 0.8;
		}
		.baowu{
			width: 100px;
			height: 100px;
			position: absolute;
			float: left;
			left: 100px;
			top: 500px;
			background-image: url(img/pet.gif);
			background-repeat: no-repeat;
			background-size: cover;
			z-index: 1;
			opacity: 0.8;
		}
		.jiaose1{
			width: 100px;
			height: 100px;
			position: absolute;
			float: left;
			left: 400px;
			top: 500px;
			background-image: url(img/player1_big.gif);
			background-repeat: no-repeat;
			background-size: cover;
			z-index: 1;
			opacity: 0.8;
		}
		.pet{
			width: 100px;
			height: 100px;
			position: absolute;
			float: left;
			left: 800px;
			top: 200px;
			background-image: url(img/player_big.gif);
			background-repeat: no-repeat;
			background-size: cover;
			z-index: 11;
			opacity: 0.8;
			display: none;
		}
	</style>
	<body>
		<div class="big">
			<div class="character"></div>
			<div class="baowu"></div>
			<div class="jiaose1"></div>
			<div class="pet"></div>
		</div>
	</body>
	<script src="js/jquery-3.1.1.min.js"></script>
	<script>
		 var ifchange=0;
		 var xx=1;
			 $('.big').click(function(e){
				 $(".character").stop(true);
				  $(".pet").stop(true);
				var oldpositionx = $(".character").position().left;
				var oldpositiony = $(".character").position().top;
				console.log("oldx:"+oldpositionx);
				console.log("oldy:"+oldpositiony);
				
				var nowpositionx = e.pageX;
				var nowpositiony = e.pageY;
				 console.log("newx:"+nowpositionx);
				 console.log("newy:"+nowpositiony);
				  // 判断是否吃宝物
				if(20<nowpositionx&&nowpositionx<180&&420<nowpositiony&&nowpositiony<580){
					setTimeout(eat,1500);
				}
				// 遇见角色1
				
				if(320<nowpositionx&&nowpositionx<480&&420<nowpositiony&&nowpositiony<580&&xx==1){
					setTimeout(meet1,1500);
				}
				// 吃宝物
				function eat(){
					ifchange=1;
					 $('.baowu').css("display","none");
				}
				// 遇见角色1
				function meet1(){
					xx=2;
					alert("恭喜你获取宠物一个");
					$('.jiaose1').css("display","none");
					$('.pet').css("display","block");
				}
				 // 判断是往做还是右移动
				 if(ifchange==0){
					 if(nowpositionx+50>oldpositionx){
					 					 $(".character").css("background-image","url(img/player_right.gif)");
					 }
					 else{
					 					  $(".character").css("background-image","url(img/player_left.gif)");
					 }
				 }else{
					 if(nowpositionx+50>oldpositionx){
					 					 $(".character").css("background-image","url(img/playerbig_right.gif)");
					 }
					 else{
					 					  $(".character").css("background-image","url(img/playerbig_left.gif)");
					 }
				 }
					 
				 
				 
				 
				$(".character").animate(
					{
						top:nowpositiony-40,
						left:nowpositionx-50
					},2000,
					function(){
						// 移动完成停下来
						$(".character").css("background-image","url(img/player3.gif)");	
					}
					
				);
				$(".pet").animate(
					{
						top:nowpositiony-40,
						left:nowpositionx+40
					},2000
					
				);
				// 双击变身
				$(".big").dblclick(function(){
					$(".character").stop(true);
					$(".character").css("background-image","url(img/player1.gif)");	
					setTimeout("$('.character').css('background-image','url(img/player3.gif)')",3500);
					
				});
				
				
			 });
		 
		
	</script>
</html>
